<template>
  <div class="viewDetail">
    <div class="viewDetail-title flex pl-16 bg_fff c_text2">
      <div
        class="tab-item commhover mr-26"
        :class="{ active: activetab == 1 }"
        @click="handleTab(1)"
      >
        规则设置
      </div>
      <!-- hovernot c_text4-->
      <div
        class="tab-item commhover"
        :class="{ active: activetab == 2 }"
        @click="handleTab(2)"
      >
        生效群
      </div>
    </div>
    <template v-if="activetab == 1">
      <div class="viewDetail-big">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="left"
          size="small"
        >
          <el-form-item label="方案名称：" prop="name">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入方案名称，最长15个字"
              maxlength="15"
              style="width: 400px"
            ></el-input>
          </el-form-item>
          <el-form-item label="触发条件：" prop="name">
            <div class="flex">
              <el-checkbox v-model="form.checked1" class="mr-0">
                <span class="c_text"
                  >进群
                  <el-input
                    v-model="form.second"
                    type="number"
                    placeholder=""
                    class="mlr-6"
                    style="width: 68px"
                  />
                  秒后发送欢迎语
                </span>
              </el-checkbox>
              <div class="g_line">|</div>
              <el-checkbox v-model="form.checked1">
                <span class="c_text"
                  >进群
                  <el-input
                    v-model="form.second"
                    type="number"
                    placeholder=""
                    style="width: 68px"
                  />
                  人，发送欢迎语
                </span>
              </el-checkbox>
            </div>
            <div class="c_999 mt-5">
              进群时间和进群人数同时设置时，将触发先满足条件的设置项
            </div>
          </el-form-item>
          <el-form-item label="生效群：" prop="radio">
            <el-radio-group v-model="form.radio">
              <el-radio :label="1">
                <span class="c_text">按客户群发送</span>
              </el-radio>
              <el-radio :label="2"><span class="c_text">根据条件筛选群聊</span></el-radio>
            </el-radio-group>
            <div v-if="form.radio == 1">
              <el-button size="small" @click="handerSelectGroup" class="mt-10">
                <i class="el-icon-sort rotate90 mr-8"></i> 选择客户群
              </el-button>
              <div class="flex aligncenter flexwrap">
                <div v-for="item in 5" :key="item" class="khitem mr-5">
                  <img src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/b1ca67b7880637a9c5012220cb8595b4.png" alt="">
                </div>
                <div class="morebox c_666 flexcenter f-18 commhover" @click="handerSelectGroup">
                  <i class="el-icon-more"></i>
                </div>
                <div>等<span class="c_primary"> 19 </span>个</div>
              </div>
            </div>
            <div v-if="form.radio == 2" class="groupbox pb-20 p-16">
              <GroupForm />
              <div class="flexbetween bg_f7f7f7 p-5 pl-8 pr-8 e_exclude">
                <div class="fw-6 flexcenter">
                  设置排除条件
                  <el-switch
                    v-model="form.exclude"
                    active-color="#3070ff"
                    inactive-color="#c7c5c5"
                    :active-value="1"
                    :inactive-value="0"
                    class="ml-6"
                  >
                  </el-switch>
                </div>
                <div class="c_warning2">开启后将排除满足以下条件客户群</div>
              </div>
              <GroupForm v-if="form.exclude == 1" />
            </div>
            <div v-if="form.radio == 2" class="groupbox-foot plr-16">
              <el-checkbox v-model="form.checked1">
                <span class="c_text">符合条件新群自动加入（建群5分钟时判断是否符合）</span>
              </el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="发送方式：" prop="way">
            <el-radio-group v-model="form.way">
              <el-radio
                v-for="(item, index) in ways"
                :key="index"
                :label="item.value"
                ><span class="c_text">{{ item.label }}</span></el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发送内容：">
            <MaterialContent
              v-if="form.way == 1 || form.way == 2"
              ref="material"
              :maxlength="6"
            />
            <MaterialContentGroup v-if="form.way == 3" :maxlength="6" />
          </el-form-item>
        </el-form>
      </div>
      <div class="greetfoot flexcenter bg_fff p-12">
        <el-button type="primary" size="small" v-hasPermi="['single:welcome:save']">保存配置</el-button>
        <!-- <el-button type="warning" size="small" @click="saveApplicate">保存并应用配置</el-button> -->
      </div>
    </template>
    <template v-else>
      <active-group />
    </template>

    <select-wechat v-if="showWechat" :visableIf.sync="showWechat" />
    <SelectClientGroup
      v-if="showgroup"
      width='1000px'
      height='500px'
      :visable.sync="showgroup"
      title="选择目标客户群"
      :isTable='true'
    />
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";
import GroupForm from "@/components/UserGroupComp/components/GroupForm";
import { listUser } from "@/api/system/user";
import MaterialContent from "@/components/MaterialContent";
import MaterialContentGroup from "@/components/MaterialContentGroup";
import SelectWechat from "@/components/UserGroupComp/SelectWechat.vue";
import ActiveGroup from "./ActiveGroup.vue";
import SelectClientGroup from "@/components/UserGroupComp/SelectClientGroup";
export default {
  name: "addOrEditUserOperations",
  components: {
    GroupForm,
    MaterialContent,
    MaterialContentGroup,
    SelectWechat,
    ActiveGroup,
    SelectClientGroup,
  },
  data() {
    return {
      activetab: 1, //当前选中
      tableHeight: 600,
      showViewConditions: false,
      showSelectProgrammeType: false, //修改方案
      showTableLabel: false,
      form: {
        name: "",
        radio: 2,
        way: 1,
        exclude: 0,
      },
      rules: {
        name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
      },
      ways: [
        { value: 1, label: "按顺序发送全部" },
        { value: 2, label: "随机发送一条" },
        { value: 3, label: "随机发送一组" },
      ],
      showWechat: false,
      showgroup: false,
    };
  },
  props: {
    info: {
      type: Object,
      default: {},
    },
  },
  created() {
    if (this.info) {
      this.form.name = this.info.planName;
    }
  },
  methods: {
    handleTab(type) {
      this.activetab = type;
    },
    getConditions() {
      this.showViewConditions = true;
    },

    handerSelectGroup() {
      this.showgroup = true;
    },

    getGroupInvitationMgt() {
      this.$router.push({
        path: "/customerOperationsMgt/newUserOperationsMgt/GroupInvitationMgt",
      });
    },
    // /** 查询用户列表 */
    // getList() {
    //   this.loading = true;
    //   listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
    //     (response) => {
    //       this.tableDataList = response.rows;
    //       this.total = response.total;
    //       this.loading = false;
    //     }
    //   );
    // },
    /** 搜索按钮操作 */
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getList();
    // },

    saveApplicate() {
      this.showWechat = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;
  // overflow-y: auto;
  .viewDetail-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e9e9e9;
    .tab-item {
      height: 100%;
      border-bottom: 2px solid transparent;
      &.active {
        color: #3070ff;
        border-bottom-color: #3070ff;
      }
    }
  }
  .viewDetail-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
  }
  .tips {
    background: #ffede3;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    word-wrap: break-word;
  }
}
.viewDetail-big {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 20px;
}
.g_line {
  color: rgba($color: #000000, $alpha: 0.06);
  margin: 0px 20px;
}
.groupbox {
  border: 1px solid rgb(238, 238, 238);
}
.e_exclude {
  width: 568px;
  margin: 20px 0;
}
.groupbox-foot {
  display: flex;
  align-items: center;
  height: 46px;
  background: #f5f6f7;
  border-radius: 2px;
  outline: 1px solid #e9e9e9;
}
.greetfoot {
  border-top: 1px solid #e9e9e9;
  position: sticky;
  bottom: 0;
  z-index: 999;
}
.khitem{
  width: 32px;
  height: 32px;
  background-color: #ccc;
  overflow: hidden;
  border-radius: 2px;
}
.morebox{
      width: 32px;
    height: 32px;
}
</style>
